<template>
  <div class="container">
    <div class="img_con">
      <!--云-->
      <div class="cloud"></div>
      <!--恐龙-->
      <div class="dinosaur"></div>
      <!--路-->
      <div class="road"></div>
      <div class="road road-2"></div>
      <!--小树-->
      <div class="tree"></div>
      <!--大树-->
      <div class="treeBig"></div>
    </div>
  </div>
</template>

<script setup>
import {onMounted} from "vue";

onMounted(() => {
  //恐龙移动
  let index = 0;
  let dino = document.querySelector('.dinosaur');
  setInterval(() => {
    index = index === 5 ? 0 : index + 1;
    dino.style.backgroundPosition = `${-index * 44}px 0`;
  }, 60);

  //恐龙跳跃
  window.addEventListener('keyup', addJumpingClass);
  function addJumpingClass(e) {
    if (e.keyCode === 32) {
      let dino = document.querySelector('.dinosaur');
      dino.classList.add('jumping');
      setTimeout(() => {
        dino.classList.remove('jumping');
      }, 1000);
    }
  }

  //碰撞检测小恐龙和树
  var dinosaur = document.querySelector('.dinosaur');
  var tree = document.querySelector('.tree');
  var bigTree = document.querySelector('.treeBig');

  function detectCollision(dino, tree) {
    var dinoRect = dino.getBoundingClientRect();
    var treeRect = tree.getBoundingClientRect();

    return!(dinoRect.right < treeRect.left ||
        dinoRect.left > treeRect.right ||
        dinoRect.bottom < treeRect.top ||
        dinoRect.top > treeRect.bottom);
  }

  setInterval(() => {
    if (detectCollision(dinosaur, tree) || detectCollision(dinosaur, bigTree)) {
      alert("游戏结束");
    }
  }, 100);
});

</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img_con {
  position: relative;
  width: 1200px;
  height: 200px;
  overflow: hidden;
}

.dinosaur {
  position: absolute;
  left: 6%;
  bottom: 0;
  width: 44px;
  height: 48px;
  background-image: url('/src/assets/dinosaur/dinosaur.png');
  background-position: 0px 0px;
}

.cloud {
  position: absolute;
  left: 20%;
  top: 40%;
  width: 46px;
  height: 14px;
  background-image: url('/src/assets/dinosaur/cloud.png');
  animation: treeMove 7s linear infinite;
  animation-delay: 2s;
}

.road, .road-2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1200px;
  height: 12px;
  background-image: url('/src/assets/dinosaur/road.png');
  animation: roadMove 6s linear infinite;
}

.road-2 {
  left: 1200px;
  transform: translateX(1200px);
}

.tree {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 36px;
  background-image: url('/src/assets/dinosaur/tree.png');
  background-position: 0px 0px;
  animation: treeMove 6s linear infinite;
}

.treeBig {
  position: absolute;
  left: 20%;
  bottom: 0;
  width: 50px;
  height: 50px;
  background-image: url('/src/assets/dinosaur/tree-big.png');
  background-position: 0px 0px;
  animation: treeMove 6s linear infinite;
  animation-delay: 3s;
}

@keyframes roadMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1200px);
  }
}

@keyframes treeMove {
  0% {
    left: 100%;
  }

  100% {
    left: 0%;
  }
}

.jumping {
  animation: jump-animation 1s ease-in-out;
}

@keyframes jump-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
